<!--
 * @Author: your name
 * @Date: 2021-10-22 10:39:58
 * @LastEditTime: 2021-10-26 19:53:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-web\src\views\carousel\index.vue
-->
<template>
  <div class="carousel">
    <el-button size="medium" type="primary">新增</el-button>
    <el-button size="medium" type="primary">预览</el-button>

    <el-table
      :data="carouselData"
      style="width: 100%"
      :row-class-name="carouselClassName">
      <el-table-column prop="id" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="轮播图名称"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="轮播图描述"
        align="center">
      </el-table-column>
      <el-table-column label="轮播图图片" align="center">
        <template v-slot="scope">
          <el-popover placement="right" trigger="hover">
            <img :src="scope.row.url" height="200" />
            <img slot="reference" :src="scope.row.url" height="50" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="editCarcousel(scope.row)"
            circle></el-button><!-- 编辑 -->
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="deleteCarousel(scope.row.id)"
            circle></el-button><!-- 删除 -->
          <el-button
            v-if="scope.row.status == '正常'"
            size="mini"
            type="info"
            icon="el-icon-check"
            @click="stopCarousel(scope.row)"
            circle></el-button><!-- 停用 -->
          <el-button
            v-else
            size="mini"
            type="success"
            icon="el-icon-message"
            @click="startCarousel(scope.row)"
            circle></el-button><!-- 启用 -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.el-table .warning-row {
  background: rgb(255, 199, 179);
}

.el-table .success-row {
  background: rgb(199, 255, 179);
}
</style>

<script>
import request from "@/utils/request";
import qs from "qs";
export default {
  data() {
    return {
      carouselData: [],
      options: [
        {
          value: '正常',
          label: '正常'
        },
        {
          value: '停用',
          label: '停用'
        }],
      value: '',
    };
  },
  methods: {

    findAllCarouselData() {
      request.get('/carousel/findAll').then((res) => {
        this.carouselData = res.data
      })
    },

    deleteCarousel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.get('/carousel/deleteById', {params: {id}}
        ).then((res) => {
          this.findAllCarouselData();
          this.$message({
            type: 'success',
            message: res.message
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    stopCarousel(val) {
      this.$confirm('此操作将停用该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        val.status = '停用'
        request.post('/carousel/saveOrUpdate', qs.stringify(val), {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        }).then((res) => {
          this.findAllCarouselData();
          this.$message({
            type: 'success',
            message: res.message
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停用'
        })
      })
    },

    startCarousel(val) {
      this.$confirm('此操作将启用用该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        val.status = '正常'
        request.post('/carousel/saveOrUpdate', qs.stringify(val), {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        }).then((res) => {
          this.findAllCarouselData();
          this.$message({
            type: 'success',
            message: res.message
          })
        }).catch((res) => {
          this.$message({
            type: 'info',
            message: res.message
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停用'
        })
      })
    },

    editCarcousel(id) {
      console.log(id);
    },

    carouselClassName({ row }) {
      if (row.status === "停用") {
        return "warning-row";
      } else if (row.status === "正常") {
        return "success-row";
      }
      return "";
    },
  },
  created() {
    this.findAllCarouselData();
  },
};
</script>